import React from "react";
import VisbarBlueprint from "visbar-blueprint";
import { connect } from "react-redux";
import { materialConfig } from "visbar-component";
import { IEditorState as IEditorReducerState } from "../../store/reducers/editor";
import { SET_BLUEPRINT } from "../../store/constants";
import echartsEventAndActionConfig from "../../constants/echarts-config/eventAndAction.json";

interface IBlueprintProps {
  setBlueprint: (graph: any) => any;
}
class Blueprint extends React.Component<IBlueprintProps & IEditorReducerState> {
  generatorBlueprintConfig = () => {
    const { components } = this.props;
    const blueprintConfig = {};
    components.forEach(comp => {
      Reflect.set(blueprintConfig, comp.id, {
        name: comp.name,
        action: !comp.node ? echartsEventAndActionConfig.action : (materialConfig as any)[comp.node]?.eVisbar?.action,
        event: !comp.node ? echartsEventAndActionConfig.event : (materialConfig as any)[comp.node]?.eVisbar?.event,
      })
    });
    return blueprintConfig;
  }
  render() {
    const { blueprint, setBlueprint } = this.props;
    return <div className="blue-print-wrapper">
      <VisbarBlueprint config={this.generatorBlueprintConfig()} initGraph={blueprint} onChange={setBlueprint} />
    </div>
  }
}

export default connect((state: any) => state.editor, (dispatch) => {
  return {
    setBlueprint: (graph: any) => dispatch({ type: SET_BLUEPRINT, payload: graph })
  }
})(Blueprint)